<!DOCTYPE html>
<html lang='en'>
<head>
 <meta charset='UTF-8'>
 <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 <meta name='viewport' content='width=device-width, initial-scale=1.0'>
 <title>Document</title>
 <script src='../public/js/vue.js'></script>
</head>
<body>
  <div id='app'>
    <!-- 
      ".stop" 阻止事件冒泡；
      有些时候在点击按钮时并不想一并触发父容器的方法
    -->
    <div @click="setUp()">
      <button @click.stop="getUp()">向上冒泡</button>
    </div>
    <br>
    <!-- 
      ".prevent" 阻止默认事件的触发；
      ① 阻止提交按钮默认跳转
      ② 修饰符可以串联
     -->
    <form action="www.baidu.com">
      <button type="submit" @click.prevent="submitFun()">提交</button>
    </form>
    <br>
    <form action="www.baidu.com">
      <div @click="setUp()">
        <button @click.stop.prevent="submitFun()">向上冒泡</button>
      </div>
    </form>
    <br>
    <!-- 
      "." 监听某个键盘值 在 . 后面跟上对应键盘按钮的代码
      ① 监听回车键
     -->
     <input type="text" @keyup.enter="onKetUp()">
     <!-- 
       ".once" 方法只会触发一次
      -->
      <br>
      <button @click.once="onClickFun()">连续点击吧</button>
  </div>
  <script>
  const app = new Vue({
    el: '#app',
    data() {
      return {
        message:'你好啊，李银河！'
      }
    },
    methods:{
      getUp() {
        console.log("事件正在冒泡");
      },
      setUp() {
        console.log('泡泡到我这了');
      },
      submitFun() {
        console.log("处理数据");
      },
      onSubmit() {
        console.log("事件触发");
      },
      onKetUp() {
        console.log("键盘事件");
      },
      onClickFun() {
        console.log("使劲儿点点点");
      }
     },
    computed:{
 
    }
  })
  </script>
</body>
</html>